// path模块
let path = require('path');
let EslintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 单文件打包
    // entry: "./main.js",
    // 多文件打包 - 合并到一个文件
    // entry: ['./main.js', './js/app.js'],
    // 多文件打包 - 单独打包到自己的文件
    entry: {
        main: './main.js',
        app: './js/app.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: "[name].js",
        clean: true
    },
    module: {
        rules: [
            // 处理css
            {
                test: /.css$/,
                // lodaer - 从后往前执行
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 处理less
            {
                test: /.less$/,
                // lodaer - 从后往前执行
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            // 处理js
            // {
            //     test: /\.js$/,
            //     exclude: /node_modules/, // 不进行处理的文件夹
            //     use: {
            //         loader: 'babel-loader',
            //         options: {
            //             presets: ['@babel/preset-env'], // 指定bebel预设包
            //         }
            //     }
            // }
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        //修改 presets 为下面的内容
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 } // 指定core-js的版本号为2
                                }
                            ]
                        ]
                    }
                }
            },
            // 处理图片
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",
                // 解析器
                parser: {
                    // 指定进行图片base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb    默认8k
                    }
                },
                // 打包生成的文件 - 生成器
                generator: {
                    filename: 'images/[hash:8][ext]',
                },
            },
            // 配置 html 的 loader
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            // 打包字体图标
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                type: 'asset',
                // 解析器
                parser: {
                    // 指定进行base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb
                    }
                },
                generator: {
                    filename: 'fonts/[hash:8][ext]',
                },
            },
        ]
    },
    mode: "development",
    plugins: [
        // new EslintPlugin(),
        new HtmlWebpackPlugin({
            template: "./index.html", // 指定html模板文件。
            filename: "index.html", //默认为index.html
            inject: "body", // 将打包生成的JS文件放置在body尾部
            // hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
            minify: {
                removeAttributeQuotes: true, // 移除属性中的双引号
                removeComments: true, // 移除注释
                collapseWhitespace: true, // 去除空格与换行
            }
        })
    ],
    // 配置开发服务
    devServer: {
        host: 'api.zhibao.com',
        port: 80, // 设置端口号
        open: true, // 自动在浏览器中打开页面
    },
    devtool: 'cheap-module-source-map',
}